<template>
  <div>
    <el-card>
      设备编号:
      <el-input
        placeholder="请输入"
        style="width: 200px; margin: 0 20px"
        v-model="params.innerCode"
      ></el-input>
      <el-button type="primary" @click="searchFn">查询</el-button>
    </el-card>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="innerCode" label="设备编号"> </el-table-column>
        <el-table-column prop="type.name" label="设备型号"> </el-table-column>
        <el-table-column prop="node.addr" label="详细地址"> </el-table-column>
        <el-table-column prop="node.ownerName" label="合作商">
        </el-table-column>
        <el-table-column prop="status" label="设备状态" width="270px">
          <el-row>
            <el-col :span="7"
              ><div>
                <el-button round size="mini" class="parmin">离线</el-button>
              </div></el-col
            >
            <el-col :span="7"
              ><div>
                <el-button round size="mini" class="parmint">货道</el-button>
              </div></el-col
            >
            <el-col :span="7"
              ><div>
                <el-button round size="mini" class="parmint">传动轴</el-button>
              </div></el-col
            >
          </el-row>
        </el-table-column>
        <el-table-column label="操作">
          <template>
            <el-button type="text" @click="detail">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
    <el-dialog title="设备详情" :visible.sync="dialogVisible" width="30%">
        <span>销售量:5646个</span><span>销售额:1.39万元</span><span>补货次数:0次</span><span>维修次数:0次</span>
        商品销量(月)
        <el-table>
          <el-table-column>

          </el-table-column>
        </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSbList, getSbCount } from "@/api/sbgl";
export default {
  data() {
    return {
      dialogVisible: false,
      total: 1,
      tableData: [],
      params: {
        pageIndex: 1,
        pageSize: 10,
        status: "",
        innerCode: "",
      },
      start: "2020-01-01",
      end: "",
      data: {
        vmType: "0",
        nodeId: "0",
        createUserId: "0",
      },
    };
  },
  methods: {
    async getSbList() {
      const res = await getSbList(this.params);
      console.log(res);
      this.tableData = res.data.currentPageRecords;
      this.total = res.data.totalCount - 0;
    },
    async getSbCount() {
      const res = await getSbCount(
        this.data,
        this.params.innerCode,
        this.start,
        this.end
      );
      console.log(res);
    },
    searchFn() {
      this.getSbList();
    },
    detail() {
      this.dialogVisible = true;
      this.getSbCount();
    },
    handleCurrentChange(current) {
      // console.log(current);
      this.params.pageIndex = current;
      this.getSbList();
    },
  },
  created() {
    this.getSbList();
  },
};
</script>

<style>
.parmin {
  background: #ff665f linear-gradient(135deg, #ffb043, #ffc020);
  color: #fff;
}
.parmint {
  background: #ff665f linear-gradient(135deg, #3fc997, #4bda98);
  color: #fff;
}
</style>
